<!-- 详情页 -->
<template>
  <div class="shiguiwu-detail">
    <!-- <DetailNavBar /> -->
    <DetailNavBar class="sl-swiper" @clickItem="clickItem"/>
    <DetailSwiper :images ="images"/>
    <DetailInfo :product="product"/>
    <DetailShopInfo  />
    <DetailGoodsInfo :dataImage="images"  :desc="product.title"/>
    <DetailParamInfo ref="param" :paramInfo="paramInfo"/>
    <DetailCommentInfo ref="comment" :commentInfo="commentInfo"/>
    <GoodsList ref="recommend" :goods="recommend"/>

  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import DetailNavBar from "./childComps/DetailNavBar";
import DetailSwiper from "./childComps/DetailSwiper";
import DetailInfo from "./childComps/DetailInfo";
import DetailShopInfo from "./childComps/DetailShopInfo";
import DetailGoodsInfo from "./childComps/DetailGoodsInfo";
import DetailParamInfo from "./childComps/DetailParamInfo";
import DetailCommentInfo from "./childComps/DetailCommentInfo";
import GoodsList from "components/content/goods/GoodsList";


import {getRandomArrayElements} from 'commons/utils'
import {gotoTarget} from 'commons/utils'

import all from "../../data/all.json";
export default {
  name: "Detail",
  //import引入的组件需要注入到对象中才能使用
  components: {
    DetailNavBar,
    DetailSwiper,
    DetailInfo,
    DetailShopInfo,
    DetailGoodsInfo,
    DetailParamInfo,
    DetailCommentInfo,
    GoodsList
  },
  data() {
    //这里存放数据
    return {
      images:[],
      product: {},
      paramInfo: {},
      commentInfo: {},
      recommend: [],
      themOffSetYs: []

    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {

    clickItem(index) {
      // console.log(index);
      this.themOffSetYs =[0,this.$refs.param.$el.offsetTop,this.$refs.comment.$el.offsetTop,this.$refs.recommend.$el.offsetTop]
      // console.log(this.themOffSetYs);
      gotoTarget(this.themOffSetYs[index])
    },
    // 时间
    getRandomArray(arr =[], count=3) {
      let pImage = all.filter(e => e.id === this.$route.params.id *1) 
      // shuffled.push(...pImage)
      let result = getRandomArrayElements(arr,count)
      result.unshift(...pImage)
      return result;
    },
    getProduct(product ={}) {
      this.product = product
      this.product['priceOld'] = Math.floor(Math.random() * 10000)
      this.product['money'] =[`销量${Math.floor(Math.random() * 10000)}` ,`收藏${Math.floor(Math.random() * 10000)}人`,'72小时发货']
      this.product['server'] =['退货补票费','全国包邮','7天无理由退货']

    },
    initParaInfo() {
      this.paramInfo.sizes={
      table:[['尺寸','S','M','X','XL'],
        ['胸围','100','102','108','112'],
        ['袖长','64','65','66','67'],
        ['裤长','96','97','98','99'],
        ['肩宽','36','37','38','39'],
        ['衣长','54','55','56','57'],]
      },
      this.paramInfo.infos = [
        {key:'薄厚',value:'普通'},
        {key:'厂名',value:'石贵武制造厂有限公司'},
        {key:'颜色',value:'上衣+裤子'},
        {key:'尺码',value:'S,M,X,XL'},
        {key:'衣长',value:'常规款（51-56cm）'},
        {key:'季节',value:'春夏秋冬'},
        {key:'厂址',value:'河路口镇岭脚村'},
      ]
      this.paramInfo.image = 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=762903341,4144912568&fm=11&gp=0.jpg'
    },
    getCommentInfo() {
      this.commentInfo['user'] = {
        avatar: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2580998935,598060247&fm=11&gp=0.jpg',
        uname: '石小白'
      }
      this.commentInfo.content = '商品很快，发货很快，上次再来！！！'
      this.commentInfo.created = new Date().getTime()
      this.commentInfo.images = getRandomArrayElements(all,2)
      this.commentInfo.style = '新款M码，短上衣'

    },
    getRecommendInfo() {
      this.recommend = getRandomArrayElements(all,24)
    },
    onload() {
      document.onreadystatechange = () => {
        console.log('监听资源在家',document.readyState);
        if (document.readyState === 'complete') {
          // document ready
          // this.themOffSetYs = []
          this.themOffSetYs =[0,this.$refs.param.$el.offsetTop,this.$refs.comment.$el.offsetTop,this.$refs.recommend.$el.offsetTop]
          // console.log(this.themOffSetYs);
        }
      }
    }
  

  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.images = this.getRandomArray(all,3)
    this.getProduct(this.images[0])
    this.initParaInfo()
    //评论数据
    this.getCommentInfo()
    //获取推荐数据
    this.getRecommendInfo()

    //监听资源加载
    this.onload()
    window.removeEventListener('scroll',null)
    console.log('---------------创建');
    
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {
  
  
  }, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style>
.detail-navbar{
  border-bottom: 1px solid #eee;
}

.shiguiwu-detail {
  position: relative;
  z-index: 50;
  background-color: #fff;
  border-bottom: 1px solid #eee;
}
.sl-swiper {
  position: sticky;
  background-color: #fff;
  top:0;
  z-index: 1000;
}
</style>